<template>
    <div class="live-box">
        <!-- <p>房间号：{{liveForm.roomNum}}</p> -->
        <div id="dplayer"></div>
        <div class="chatwin-box">
            <div class="box-top" ref="boxTop">
                <div v-html="htmlContentUser" ></div>
                <div v-html="htmlContent" ref="chatContainer"> </div>
            </div>
            <div class="send-message-box">
                <div class="send-message-box-div1"> 123</div>
                <!-- <el-input type="textarea" v-model="messageContent" style="min-height: 60px;"></el-input> -->
                <!-- <el-input
                    type="textarea"
                    :autosize="{ minRows:4,maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="messageContent">
                </el-input> -->
                <p class="p1" contenteditable="true" @input="updateMessage" ref="messageInput" ></p>
                <el-button @click="sendMessage" type="primary" round class="button-style" size="small">发送</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import Hls from "hls.js";
export default {
    data () {
        return {
            liveForm: {
                id: '',
                // 播流路径
                playUrl: '',
                socket: null,
            },
            // 当前登录的用户名
            userName: '',
            // 当前登录的用户id
            userId: '',
            // 消息窗口 的消息内容
            messageContent: '',
            // 消息样式
            htmlContent: '',
            // 用户进直播消息样式
            htmlContentUser: '',
            dp: null,
            maxMessageLength: 200, // 设置最大字符数
        }
    },
    watch: {
        liveForm (newData) {
            console.log(newData)
            if (newData.roomNum !== '') {
                this.$nextTick().then(() => {
                    // this.webs()
                    this.player()
                })
            }
        }
    },
    mounted () {
        this.userName  = window.sessionStorage.getItem('userName')
        this.id  = window.sessionStorage.getItem('userId')
        this.liveForm.id = this.$route.query.id
        this.getLiveById()
    },
    methods: {
        updateMessage(event) {
            this.messageContent = event.target.innerText;
            if (this.messageContent.length > this.maxMessageLength) {
                this.messageContent = this.messageContent.slice(0, this.maxMessageLength);
                this.$refs.messageInput.innerText = this.messageContent;
            }
        },
        getLive () {
            const live = {
                playUrl: 'http://gz.lfeifan.com/live/c4ca4238a0b923820dcc509a6f75849b.m3u8?txSecret=e1ba542dc290db66027b0189817ebc83&txTime=64AF5884'
            }
            this.liveForm = live
        },
        // 发送消息
        sendMessage () {
            const range = window.getSelection().getRangeAt(0);
            const selectionContents = range.cloneContents();
            const div = document.createElement('div');
            div.appendChild(selectionContents);
            const html = div.innerHTML;
            this.socket.send(this.messageContent)
            this.messageContent = '' 
             // 清空 <p> 标签的值
            this.$refs.messageInput.textContent = '';
            this.htmlContent += html;
            this.$nextTick(() => {
                const container = this.$refs.chatContainer;
                container.scrollTop = container.scrollHeight;
            });
            this.$nextTick(() => {
                const boxTop = this.$refs.boxTop;
                boxTop.scrollTop = boxTop.scrollHeight;
            });

        },

// sendMessage() {
//             const range = window.getSelection().getRangeAt(0);
//             const selectionContents = range.cloneContents();
//             const div = document.createElement('div');
//             div.appendChild(selectionContents);
//             const html = div.innerHTML;

//             this.socket.send(this.messageContent);
//             this.messageContent = '';
//             this.htmlContent += html;

//             this.$nextTick(() => {
//                 const container = this.$refs.chatContainer;
//                 container.scrollTop = container.scrollHeight;
//             });
//             },

        // 创建对话
        webs () {
            //
            this.socket = new WebSocket("ws://localhost:80991/live/" + this.id + "/" + this.userName + "/" + this.liveForm.roomNum);
            //打开socket
            this.socket.onopen = function () {
            }
            var that = this
            //接收到消息的回调方法
            this.socket.onmessage = function (msg) {
                let data = JSON.parse(msg.data)
                var html = ''
                if (data.roomNum == that.liveForm.roomNum) {
                    if (data.come == 0) {
                        html = "<p><span style=\"color: rgb(162,179,191)\">" + data.userName + "："+ data.message+"</span>"  + "</p>"
                        const danmaku = {
                            text: data.message,
                            color: '#fff',
                            type: 'right',
                        };
                        that.dp.danmaku.draw(danmaku);
                        that.htmlContent += html
                    } else {
                        html = "<p style='color: rgb(162,179,191)'>" + data.userName + data.message + "</p>"
                        that.htmlContentUser += html
                    }
                }
                // that.htmlContent += html
                
            }

            //连接关闭的回调方法
            this.socket.onclose = function () {
                console.log("close");
            }
        },
        // 根据id获取直播间 信息
        getLiveById () {
            this.$axios.get('/live/getLiveById', {
                params: {
                    id: this.liveForm.id
                }
            }).then(res => {
                this.liveForm = res.data.data
            })
        },
        player () {
            var that = this
            this.dp = new this.$dPlayer({
                container: document.getElementById('dplayer'),
                live: true,
                danmaku: true,
                autoplay: true,
                apiBackend: {
                    read: function (options) {
                        console.log('Pretend to connect WebSocket');
                        that.webs()
                        options.success([]);
                    },
                    send: function (options) {
                        console.log('Pretend to send danmaku via WebSocket', options.data);
                        that.messageContent = options.data.text
                        that.sendMessage()
                        options.success();
                    },
                },
                video: {
                    url: this.liveForm.livePlayUrl,
                    // url: this.liveForm.livePlayUrl,
                    type: 'customHls',
                    customType: {
                        customHls: function (video, player) {
                            const hls = new Hls();
                            hls.loadSource(video.src);
                            hls.attachMedia(video);
                        },
                    },
                },
            })
            this.dp.play()
        },
    }
}
</script>

<style scoped>
.live-box {
    width: 100%;
    height: 100%;
}

.live-box #dplayer {
    width: 80%;
    height: 100%;
    float: left;
}

.chatwin-box {
    width: 20%;
    height: 100%;
    float: left;
    background-color: rgb(27, 33, 40);
    position: relative;
    overflow-y: auto;
}

.send-message-box {
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgb(34, 41, 49);
    border-top: 1px solid #2b2b2b;
}

.send-message-box .send-message-box-div1 {
    width: 100%;
    height: 40px;
}

.send-message-box p.p1 {
    width: 100%;
    height: 100px;
    outline: none;
    border: none;
    margin: 0%;
    color: #fff;
    max-height: 100px;
    overflow-y: auto;
}

.send-message-box p.p1::-webkit-scrollbar {
    width: 8px;
}

.send-message-box p.p1::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.send-message-box p.p1::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}



.box-top {
   width: 100%;
  background-color: red;
  overflow-y: auto; /* 添加这行以启用垂直滚动条 */
  max-height: 70%; /* 添加这行以限制内容的最大高度 */
}

.el-textarea textarea {
    min-height: 80px;
}

.send-message-box .button-style {
    float: right;
}
.box-top > div {
    overflow-y: auto;
    max-height: 70%;
}

.box-top > div {
    overflow-y: auto;
    max-height: 100%;
    scrollbar-width: thin; /* 添加这行以调整滚动条的宽度 */
    scrollbar-color: transparent; /* 添加这行以设置滚动条的颜色为透明 */
}

/* 隐藏滚动条的样式 */
.box-top > div::-webkit-scrollbar {
    width: 0.2rem; /* 调整滚动条宽度 */
    background-color: transparent; /* 设置滚动条背景颜色为透明 */
}

.box-top > div::-webkit-scrollbar-thumb {
    background-color: transparent; /* 设置滚动条滑块颜色为透明 */
}

.box-top > div::-webkit-scrollbar-track {
    background-color: transparent; /* 设置滚动条轨道颜色为透明 */
}
</style>
